<template>
  <view :style="{ '--themeColor': themeColor }" class="pull-coupon">
    <nav-bar title="领券中心" />
    <view class="list">
      <!-- <mescroll-uni
        :fixed="false"
        ref="mescrollRef"
        @down="downCallback"
        @up="upCallback"
        :up="{
          textNoMore: '没有更多了',
          empty: {
            tip: '暂无相关数据',
            icon: 'https://hyyxboss.oss-cn-shenzhen.aliyuncs.com//img/pub/no_data.png',
          },
        }"
      > -->
      <coupon-content
        v-for="item in list"
        :key="item.id"
        :couponContet="item"
        :location="location"
      />
      <div class="nomore" v-if="list.length == total && total > 0">
        没有更多了～
      </div>
      <list-empty v-if="list.length < 1" />
      <!-- </mescroll-uni> -->
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import couponContent from "@/components/pageComponents/sp-coupon/coupon-content/index.vue";
import ListEmpty from "@/components/baseComponents/list-enpty/index.vue";
import { shelfList } from "@/service/api/sp-coupon/index";
export default {
  mixins: [MescrollMixin], // 使用mixin

  components: {
    couponContent,
    ListEmpty,
  },
  data() {
    return {
      list: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      location: { longitude: "", latitude: "" },
      total: 0,
    };
  },
  computed: {
    ...mapState("sp-common/base", ["themeColor"]),
  },
  created() {
    this.$getUserLocation().then((res) => {
      let result = res?.currentLocation ? res?.currentLocation : res?.location;
      let { longitude, latitude } = result;
      this.location = {
        longitude,
        latitude,
      };
      this.getCouponList();
    });
  },
  onPullDownRefresh() {
    // 1. 重置关键数据
    this.queryParams.pageNum = 1;
    this.total = 0;
    this.list = [];
    this.getCouponList();
  },
  onReachBottom() {
    this.upCallback();
  },
  methods: {
    upCallback() {
      if (this.list.length >= this.total) return;
      this.queryParams.pageNum++;
      this.getCouponList();
    },
    getCouponList() {
      let {
        queryParams,
        queryParams: { pageNum },
        location,
      } = this;
      queryParams = { ...queryParams, ...location };
      shelfList(queryParams).then((res) => {
        let { total, list = [] } = res;
        this.list = pageNum == 1 ? list : this.list.concat(list);
        this.total = total;
        uni.stopPullDownRefresh();
      });
    },
  },
};
</script>

<style>
page {
  background-color: #f7f7f7;
  width: 100%;
  /* height: 100vh; */
}
page::-webkit-scrollbar {
  display: none;
}
</style>
<style lang="scss" scoped>
.pull-coupon {
  display: flex;
  flex-direction: column;
  width: calc(100% - 40rpx);
  height: 100%;
  .list {
    padding: 20rpx 20rpx 0;
    margin-top: 20rpx;
    flex: 1;
    width: 100%;
  }
  .nomore {
    width: 100%;
    text-align: center;
    color: #ccc;
    padding: 25rpx 0;
    font-size: 26rpx;
  }
}
</style>
